<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>IIT Web Conference</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" href="index.css" type="text/css"></link>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript" src="web_socket.js"></script>
		<!--script type="text/javascript" src="socket.io.js"></script-->
		<script type="text/javascript">
				WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";
				WEB_SOCKET_DEBUG = true;
		</script>
    <script type="text/javascript" src="AC_OETags.js" language="javascript"></script>
    <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script-->
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript" src="base64.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript" src="restserver.js"></script>
    <script type="text/javascript" src="room.js"></script>
		<script type="text/javascript" src="videoio.js"></script>
</head>

<body onload="room.init(); restserver.init(room.on_open, null, room.on_notify, 'div-connecting', 'span-connecting'),document.getElementById('login_name').focus()">

<!-- 
The connecting prompt displays with z-index 100
-->
<div id="div-connecting" class="has-shadow" style="visibility: hidden;">
  <span id="span-connecting"></span>
</div>

<!-- 
The header displays the banner.
-->
<div id="div-header" class="has-shadow">
  <div class="has-gradient"><span class="heading">
	<img src="iit-icon.png" width="16px" height="16px"></img> IIT Web Conference</span></div>
	<span class="footer">
  A demonstration of Flash Player and WebRTC technologies for web-based audio and video conferencing and sharing</span>
</div>

<!--
The main view has many tabs: main, conference, preferences, help.
-->
<div id="div-main">
  <ol id="ol-tabs" class="toc">
  <li id="li-first" class="current" onclick="room.on_select_tab('first')">Main</li>
	<li id="li-conference" onclick="room.on_select_tab('conference')">Video Conference</li>
	<li id="li-preferences" onclick="room.on_select_tab('preferences')">Preferences</li>
	<li id="li-help" onclick="room.on_select_tab('help')">Help</li>
  </ol>

  <div id="div-first" class="content has-shadow" style="visibility: visible; overflow: auto;">
    <div id="join-conf-box" class="content-box">
      <div class="content-header">Join Existing Web Conference</div>
      <table>
        <tr><td align="right">Your full name:</td><td>
          <input type="text" id="join_name"/>
        </td></tr><tr><td align="right">Select a conference:</td><td>
          <select id="join_room" style="width: 130px;">
				    <option>No Available Conference</option>
          </select>
        </td></tr><tr><td align="right">Moderator password:<br/>(optional)</td><td>
          <input type="password" id="join_password"/>
        </td></tr><tr><td colspan="2" align="center">
          <input id="join-button" type="button" value="Join" class="button"
				    onclick="room.join_or_leave()" title="join/leave a conference"></input>
        </td></tr>
      </table>
	  </div>

    <div id="create-conf-box" class="content-box">
      <div class="content-header">Create New Web Conference</div>
      <table>
        <tr><td align="right">Your full name:</td><td>
          <input type="text" id="create_name"/>
        </td></tr><tr><td align="right">Conference name:</td><td>
          <input type="text" id="create_room"/>
        </td></tr><tr><td align="right">Moderator password:</td><td>
          <input type="password" id="create_password"/>
        </td></tr><tr><td align="right">Password again:</td><td>
          <input type="password" id="create_password2"/>
        </td></tr><tr><td colspan="2" align="center">
          <input id="create-button" type="button" value="Create" class="button"
				    onclick="room.create()" title="create a new conference and join it"></input>
        </td></tr>
      </table>
    </div>
		
    <div id="login-box" class="content-box">
      <div class="content-header">Login to Receive Invite</div>
      <table>
        <tr><td align="right">Your name:</td><td>
          <input type="text" id="login_name" style="width: 100px;"/>
        </td></tr><tr><td colspan="2" align="center">
          <input id="login-button" type="button" value="Login" class="button"
				    onclick="room.login()" title="login/logout to receive invite"></input>
        </td></tr>
      </table>
	  </div>
		
    <div id="who-is-online-box" class="content-box">
      <div class="content-header">Who is Online?</div>
		  <div id="online-user-list"></div>
			<div style="bottom: 4px; left: 0px; right: 0px; position: absolute; text-align: center;">
				 Select and send
        <input id="invitebutton" type="button" value="Invite" class="button"
				  onclick="room.invite()" title="invite more people after your have joined a conference"></input>
			</div>
		</div>
		
		<div id="min-requirements">
				<h3>Minimum Requirements</h3>
				(met by Google Chrome web browser).
				<ol>
          <li>Lastest <a href="http://get.adobe.com/flashplayer/" style="text-decoration: none; color: #000000;">Flash Player</a> plugin
					<br/>or, <a href="http://www.webrtc.org/running-the-demos" style="text-decoration: none; color: #000000;">Google Canary</a> with WebRTC support</li>
          <li>Good Internet connectivity</li>
					<li>Open and less restrictive NAT/firewall</li>
				</ol>
				
				<div id="main_error" style="color: #800000;"></div>
		</div>
    
  </div>

  <div id="div-conference" class="content has-shadow" style="visibility: hidden;">
    <div id="user-list-box" class="content-box">
      <div class="content-header">Participants
				<img id="hand-icon" src="hand_icon_16x16.png" class="button-icon" title="click here to raise/unraise hand"
				    onclick="room.raise_hand()"></img>
				<img id="document-icon" src="document_icon_16x16.png" class="button-icon" title="click here to share slides"
				    onclick="room.share_slides()"></img>
				<!--
				<img id="add-icon" src="add_icon_15x15.png" class="button-icon" title="click here to invite people to this conference"
						onclick="room.invite_people()"></img>
				-->
      </div>
      <div id="user-list">
        <ul id="participants" class="participants">
        </ul>
      </div>
	  </div>
    <div id="text-chat-box" class="content-box">
      <div class="content-header">Text Chat
				<img id="close-icon" src="close_icon_16x16.png" class="button-icon" title="click here to clear your chat history"
						 onclick="room.clear_chathistory()"></img>
			</div>
      <div id="chat-history"></div>
      <div id="chat-input">

				<input id="inputText" type="text" style="left: 2px; width: 190px;" autocomplete="off"
				  title="Type your message here and press enter"
					value="Enter your message here" 
					onclick="if ($('inputText').value == 'Enter your message here') {
							$('inputText').value = '';
						}"
					onkeypress="javascript: if ((event.keyCode || event.which) == 13) {
						room.process_command($('inputText').value);
						$('inputText').value = ''; 
						return false; 
					}"/> 
      </div>
	  </div>
    <div id="videos-box"></div> <!-- don't put any text node in videos-box -->
  </div>

  <div id="div-preferences" class="content has-shadow" style="visibility: hidden; overflow: auto;">
    <div class="content-box" style="width: 330px;">
      <div class="content-header">Change Moderator Password</div>
      <table width="100%">
        <tr><td align="right">Enter current password:</td><td>
          <input type="password" id="change_moderator_password_current"/>
        <tr><td align="right">Enter new password:</td><td>
          <input type="password" id="change_moderator_password"/>
        <tr><td align="right">Re-enter new password:</td><td>
          <input type="password" id="change_moderator_password2"/>
        </td></tr><tr><td colspan="2" align="center">
          <input id="save-moderator-password" type="button" value="Save" class="button"
				    onclick="room.change_moderator_password(sanitize($('change_moderator_password_current').value),
																sanitize($('change_moderator_password').value),
																sanitize($('change_moderator_password2').value))"></input>
        </td></tr>
      </table>
    </div>
		<br/>
		<!--
    <div class="content-box" style="width: 330px;">
      <div class="content-header">Private Conference</div>
      <table width="100%">
        </td></tr><tr><td>Is this a private conference:</td><td>
          <input type="checkbox" id="change_private"/>
        </td></tr><tr><td>If yes, enter participant code:</td><td>
          <input type="password" id="change_participant_password"/>
        </td></tr><tr><td>Re-enter participant code:</td><td>
          <input type="password" id="change_participant_password2"/>
        </td></tr><tr><td colspan="2" align="center">
          <input id="save-private-settings" type="button" value="Save" class="button"
				    onclick="room.change_privacy(sanitize($('change_private').checked),
																sanitize($('change_participant_password').value),
																sanitize($('change_participant_password2').value))"></input>
        </td></tr>
      </table>
    </div>
		<br/>
		-->
    <div class="content-box" style="width: 330px;">
      <div class="content-header">Conference Settings</div>
      <table width="100%">
        </td></tr><tr><td align="right">Is this a persistent conference:</td><td>
          <input type="checkbox" id="change_persistent"
						title="A persistent conference preserves any text chat messages and is not deleted when the owner leaves"/>
        </td></tr><tr><td align="right">Auto-start new participant's video:</td><td>
          <input type="checkbox" id="change_video_auto"
					  title="Auto-start video stream of a new participant on join, instead of waiting for moderator to enable his video"/>
        </td></tr><tr><td align="right">Show per participant video controls:</td><td>
          <input type="checkbox" id="change_video_controls"
					  title="Display video controls below the video box for each participant to control the audio and video"/>
        </td></tr><tr><td align="right">Allow HTML in text chat:</td><td>
          <input type="checkbox" id="change_allow_html"
					  title="Allow markups in text chat, so that sender can change font, color, size, etc., of text chat messages"/>
        </td></tr><tr><td align="right">Show header banner at top:</td><td>
          <input type="checkbox" id="change_show_header" checked
						title="Display the top header box"/>
        </td></tr><tr><td align="right">Show footer banner at bottom:</td><td>
          <input type="checkbox" id="change_show_footer" checked
						title="Display the bottom project resources box"/>
        </td></tr><tr><td align="right"><b>(new)</b> Enable WebRTC when available:</td><td>
          <input type="checkbox" id="change_enable_webrtc" 
						title="Enable WebRTC extension if available in the browser" onclick="$('change_enable_flashplayer').checked = !$('change_enable_webrtc').checked"/>
        </td></tr><tr><td align="right"><b>(new)</b> Enable Flash Player when available:</td><td>
          <input type="checkbox" id="change_enable_flashplayer" checked
						title="Enable Flash Player plugin if available in the browser"/>
        </td></tr><tr><td colspan="2" align="center">
          <input id="save-conference-settings" type="button" value="Save" class="button"
				    onclick="room.change_conference_settings($('change_persistent').checked,$('change_video_auto').checked,$('change_allow_html').checked,$('change_show_header').checked,$('change_show_footer').checked,$('change_video_controls').checked,$('change_enable_webrtc').checked,$('change_enable_flashplayer').checked)"></input>
        </td></tr>
      </table>
    </div>
		
    <div id="preferences-error" style="color: #800000; position: absolute; left: 10px; top: 350px;"></div>
		
    <div class="content-box" style="width: 330px; position: absolute; left: 360px; top: 10px;">
      <div class="content-header">Media and Device Settings</div>
      <script type="text/javascript">
        if (typeof navigator.webkitGetUserMedia != "undefined") {
          document.write("You have WebRTC enabled<br/>");
        } else {
          document.write("You have WebRTC disabled<br/>");
        }
				
        var hasRequiredVersion = DetectFlashVer(10, 3, 0);
        if (hasRequiredVersion) {
          document.write("You have Flash Player 10.3 or later");
        } else {
          document.write("You DO NOT have Flash Player 10.3. <a href='http://get.adobe.com/flashplayer/'>Go get Flash</a>.");
        }
			</script>
			<br/>
			Please click on "Allow" and "Remember" below.<br/>
			<center>
				<script type="text/javascript">
						document.write(getVideoIO("privacy", "", "216", "139", "#ffffff", "transparent"));
				</script>
			</center>
			<br/>
    </div>
		
    <div class="content-box" style="width: 330px; position: absolute; left: 360px; top: 240px;">
      <div class="content-header">Visual Layout (only for your view)</div>
      <table width="100%">
        </td></tr><tr><td align="right">Show or hide the participant list box:</td><td>
          <input type="checkbox" id="change_show_participant" checked
						title="Show or hide the participant list box"/>
        </td></tr><tr><td colspan="2" align="right">
				  Position of participant list box:
          Left <input type="radio" value="left" name="change_show_participant_position" id="change_show_participant_left" checked/> or 
          Right <input type="radio" value="right" name="change_show_participant_position" id="change_show_participant_right"/>
        </td></tr><tr><td align="right">Show or hide the text chat messages box:</td><td>
          <input type="checkbox" id="change_show_chathistory" checked
					  title="Show or hide the text chat messages box"/>
        </td></tr><tr><td colspan="2" align="right">
				  Position of chat history box:
          Left <input type="radio" value="left" name="change_show_chathistory_position" id="change_show_chathistory_left" checked/> or 
          Right <input type="radio" value="right" name="change_show_chathistory_position" id="change_show_chathistory_right"/>
        </td></tr><tr><td colspan="2" align="center">
				  <input type="button" value="Change" class="button"
					  onclick="room.change_visual_layout($('change_show_participant').checked,$('change_show_participant_left').checked,$('change_show_chathistory').checked,$('change_show_chathistory_left').checked)"></input>
        </td></tr>
      </table>
		</div>
		
		
		<div class="content-box" style="width: 350px; position: absolute; left: 710px; top: 10px;">
		  <div class="content-header">Transmit Media Quality</div>
				
			<div id="transmit-quality" style="padding: 4px;">
				
				<input id="microphone" type="checkbox" onclick="return room.set_video_property('microphone')" checked/>
				<b>Microphone</b>
				
						quality 
						<select id="encodeQuality" type="text" onchange="return room.set_video_property('encodeQuality')">
								<option value="2">poor</option><option value="4">average</option>
								<option value="6" id="encodeQuality_default" selected="selected">good</option>
								<option value="8">very good</option><option value="10">excellent</option>
						</select>
						<!--onkeypress="if (isEnter(event)) return setNumber('encodeQuality', 'encodeQuality')"/-->
						<br/>
				
				<input id="camera" type="checkbox" onclick="return room.set_video_property('camera')" checked/> 
				<b>Camera</b>
				
						quality
						<select id="cameraQuality" onchange="return room.set_video_property('cameraQuality')">
								<option value="50">poor</option><option value="70">average</option>
								<option value="80" id="cameraQuality_default" selected="selected">good</option>
								<option value="90">very good</option><option value="95">excellent</option>
								<option value="0">automatic</option>
						</select>
						
						b/w
						<select id="cameraBandwidth" onchange="return room.set_video_property('cameraBandwidth')">
								<option value="1024">very low</option><option value="4096">low</option>
								<option value="8192">average</option>
								<option value="16384">high</option><option value="32768">very high</option>
								<option value="0" id="cameraBandwidth_default" selected="selected">automatic</option>
						</select>
						
						<br/>
						
						&nbsp;&nbsp;&nbsp;&nbsp;
						
						frames/second
						<select id="cameraFPS" onchange="return room.set_video_property('cameraFPS')">
								<option value="1">poor</option><option value="5">average</option>
								<option value="12" id="cameraFPS_default" selected="selected">good</option>
								<option value="15">very good</option><option value="24">excellent</option>
						</select>
						&nbsp;&nbsp;
						
						current value:
						<span id="currentFPS">0</span>
						
						<br/>
				
						&nbsp;&nbsp;&nbsp;&nbsp;
						dimension
						<select id="cameraDimension" onchange="return room.set_video_property('cameraDimension')">
								<option value="120x90">x-small</option><option value="200x120">small</option>
								<option value="240x180" id="cameraDimension_default" selected="selected">medium</option>
								<option value="320x240">large</option><option value="640x480">x-large</option>
						</select>
						&nbsp;&nbsp;
						
						loopback
						<input id="cameraLoopback" type="checkbox" onclick="return room.set_video_property('cameraLoopback')"/>
						
						<br/>
			</div>
		</div>
		
		<div class="content-box" style="width: 350px; position: absolute; left: 710px; top: 160px;">
		    <div class="content-header">Network Quality</div>
				
				<div id="receive-quality" style="padding: 4px; min-height: 10px;">
				</div>
		</div>
		
  </div>
  
  <div id="div-help" class="content has-shadow" style="visibility: hidden; overflow: hidden; top: 32px; bottom: 0px;">
		<iframe width="100%" height="100%" src="help.html"></iframe>
  </div>
</div>

<!--
The footer area displays copyright information and links to project resources.
-->
<div id="div-footer" class="has-shadow">
  <div class="has-gradient">
    <span class="heading">Links to Project Resources</span>
    <span class="copyright">&copy; 2010-2011 <a href="http://kundansingh.com">Kundan Singh</a>,
			&copy; 2011-2012 <a href="http://theintencity.com">Intencity Cloud Technologies</a>, All Rights Reserved.</span>
  </div>
  <span class="footer">
    <a href="https://sites.google.com/site/vvowproject" target="_blank">Voice and Video on Web,</a>
    <a href="http://code.google.com/p/flash-videoio" target="_blank">Flash-based Audio and Video Communication</a>,
		<a href="http://tools.ietf.org/html/draft-sinnreich-sip-web-apis-01" target="_blank">SIP APIs for web communications</a>
  </span>
</div>

<script type="text/javascript">
room.init();
</script>

</body>
</html>
